<script setup lang="ts">

import DisplaySlot from "@/views/homePage/displaySlot.vue";

import {getMoreDetail, randomList} from "@/api/home";
import {ref} from "vue";
import {useRouter} from "vue-router";
let randomLists=ref()
randomList().then(res=> {

    randomLists.value = res.rows.map(item=> {
        item.mainPic = 'http://192.168.5.120:8199'+item.mainPic
        return item
    })
})
const router =useRouter()
const router_2 =useRouter()
function todetail(item) {
    router.push({
        path:'charater',
        query:{
            publicizeId:item.publicizeId
        }
    });
}

function toMore() {
    router_2.push({
        path:'more',
    })
}

</script>
<template>
    <display-slot>
        <template v-slot:title>
            <div class="title">
                <div class="titleLeft">
                    <div class="titleLeftImg">
                        <img src="../../assets/images/冀商风采.png" alt="">
                    </div>
                    <div class="titleText">冀商风采</div>
                </div>
<!--                <router-link to="./more">-->

                <div class="titleRight" @click="toMore">
                    <div class="more">更多</div>
                    <div class="moreimgBox">
                        <img src="./images/right-circle.png" alt="">
                    </div>
                </div>
<!--                </router-link>-->
            </div>
        </template>
        <template v-slot:content>
<!--            轮播-->
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="item in randomLists" :key="item.contactUserId">

<!--                        <router-link to="./charater">-->
                            <div class="content" @click="todetail(item)" >
                                <div class="imgBox">
                                    <img :src="item.mainPic" alt="">

                                </div>
                                <div class="contentRight">
                                    <div class="contentRightTitle">
                                        {{item.title}}
                                    </div>
                                    <div class="contentRightDetail">
                                        <!--                        <div >外贸出口领域领军人</div>-->
                                        <div class="contentDetail">
                                            {{item.intro}}

                                        </div>
                                    </div>
                                </div>
                            </div>
<!--                        </router-link>-->
                </van-swipe-item>
            </van-swipe>
        </template>
    </display-slot>

</template>
<style scoped>
:deep(.van-swipe__track) {
    transition-duration: 10ms; ; width: 1962px;
}
.title {
    height: 21px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    .titleLeft {
        display: flex;
        .titleLeftImg {
            margin: 3px 8px 3px 0;
            width: 15px;
            height: 15px;
            img {
                width: 100%;
            }
        }
        .titleText {
            font-size: 15px;
        }
    }
    .titleRight {
        width: 15%;
        display: flex;
        align-items: center;
        margin-right: 20px;
        justify-content: space-between;
        .more {
            font-size: 12px;
            color: #999999;
            margin-right: 5px;
        }
        .moreimgBox {
        }
    }
}
.content{
    display: flex;
    overflow: hidden;
    .imgBox {
        margin: 0.5px 0 ;
        width: 40%;
        height: 175.5px;
        >img {
            width: 100%;
            height: 100%;
        }
    }
    .contentRight {
        width: 50%;
        margin-left: 14.5px;
        .contentRightTitle {
            font-size: 19px;
            color: #333;
            margin-bottom: 10.5px;
        }
        .contentRightDetail {
            font-size: 13px;
            .contentDetail {
                display: -webkit-box;
                -webkit-line-clamp: 5;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow:ellipsis;
            }
        }
    }
}
</style>